<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript">
        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("username").value;
                // xhr.open("GET", "/Ajax/userCheckServlet?username=" + username, true);
                xhr.open("POST", "/Ajax/userCheckServlet",true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function (){
                    if (this.readyState === 4 && this.status === 200) {
                        var respText = xhr.responseText;
                        if (respText !== "") {
                            document.getElementById("warn").innerText = "用户已存在";
                        } else {
                            document.getElementById("warn").innerText = "";
                        }
                    }
                }
                // xhr.send();
                var data = "username=" + username;
                xhr.send(data);
            }
        }
    </script>
</head>
<body>
<h1>注册用户</h1>
<form>
    用户名字: <input type="text" id="username" name="username">
    <input type="button" id="checkButton" value="验证用户名">
    <label id="warn"></label><br/><br/>
    用户密码: <input type="password" id="password" name="password"><br/><br/>
    用户邮箱: <input type="email" id="email" name="email"><br/><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>